<template>
    <div class="gradeTable">
        <el-table :data="gradeTable" style="width: 100%;" border
            :header-cell-style="{background:'#fafafa',color:'#333',fontWeight:800,fontSize:'12px'}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading">
            <el-table-column label="序号" width="60">
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="lampTypeName" label="联络灯类型" width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="infoUserName" label="通知人员">
            </el-table-column>
            <el-table-column width="80px">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <i class="el-icon-edit" style="cursor: pointer;color:#409EFF;margin-right:15px" 
                            @click="handelTable({type:'edit',row:scope.row})"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <i class="el-icon-close" style="cursor: pointer;color:#409EFF" @click="del(scope.$index)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-button icon='el-icon-circle-plus-outline' class='add' type="text" @click="handelTable({type:'add'})">添加行</el-button>
    </div>
</template>

<script>
    import {
        deviceLampDetailList
    } from '@/api/lampController'
    export default {
        data() {
            return {
                loading: false,
                userOptions: [],
                gradeTable: []
            }
        },
        props:['deviceId'],
        methods: {
            //联络灯到人配置详情列表
            getDeviceLampDetailList: async function (data) {
                this.loading = true
                const res = await deviceLampDetailList(data)
                if (res.code == 200) {
                    this.gradeTable = res.data
                }
                this.loading = false
            },
            //添加行--编辑
            handelTable(payload) {
                this.$emit('handelTable',payload)
            },
            //删除
            del(index) {
                const id = this.gradeTable[index].id
                this.gradeTable.splice(index, 1)
                if(id !== undefined) this.$emit('getRemoveIds',id)
            },
            close() {
              this.gradeTable = []
            },
            //更新table
            updateTable(payload) {
                const {id,infoUser,lampTypeId,lampTypeName,infoUserName} = payload
                if(id === null){ //添加
                    this.gradeTable.push({
                        infoUser,
                        lampTypeId,
                        lampTypeName,
                        infoUserName:infoUserName.toString()
                    })
                }else{ //修改
                    this.gradeTable.forEach(i => {
                        if(i.id == id){
                            i.id = id
                            i.infoUser = infoUser
                            i.lampTypeId = lampTypeId
                            i.lampTypeName = lampTypeName
                            i.infoUserName = infoUserName.toString()
                        }
                    })
                }
            },
            getTabelInfo() {
                const jsonTable = JSON.parse(JSON.stringify(this.gradeTable))
                return jsonTable.map(i => {
                    return {
                        id:i.id,
                        deviceId:this.deviceId,
                        infoUser:i.infoUser.toString(),
                        lampTypeId:i.lampTypeId
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .gradeTable {}
</style>